<template>
  <div class="mian-shi">
    <!-- 卡片视图 -->
    <el-card class="box-card">
      <el-row>
        <el-col :span="18">
          <div class="main">
            <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
            >
              <el-form-item label="关键字">
                <el-input v-model="formInline.user" size="small"></el-input>
              </el-form-item>
              <el-form-item label="状态" class="zhuangtai">
                <el-select
                  v-model="formInline.region"
                  placeholder="请选择"
                  size="small"
                >
                  <el-option label="启用" value="1"></el-option>
                  <el-option label="禁用" value="0"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="plain" size="mini" @click="formInline = ''"
                  >清除</el-button
                >
                <el-button type="primary" size="mini" @click="getInquire"
                  >搜索</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </el-col>
        <el-col :span="6" style="text-align: right">
          <div class="newly-increased">
            <el-button
              type="success"
              icon="el-icon-edit"
              size="mini"
              @click="outerVisible = true"
            >
              <span>新增技巧</span>
            </el-button>
          </div>
        </el-col>
      </el-row>

      <!-- 新增技巧的对话框 -->
      <el-alert :title="`数据一共${total}条`" type="info" show-icon> </el-alert>
      <!-- /新增技巧的对话框 -->

      <!-- 用户列表区域 -->
      <el-table class="has-gutter" :data="articlelist">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="title" label="文章标题"> </el-table-column>
        <el-table-column prop="visits" label="阅读数"> </el-table-column>
        <el-table-column prop="username" label="录入人"> </el-table-column>
        <el-table-column label="录入时间">
          <div>{{ articlelist.createTime | filterTime }}</div>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.state === 1">已启用</span>
            <span v-else>已禁用</span>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="200">
          <template slot-scope="scope">
            <span @click="viewItem(scope.row)">预览</span>
            <span @click="onState(scope.row)">
              <span v-if="scope.row.state === 1">禁用</span>
              <span v-else>启用</span>
            </span>
            <span @click="formChange(scope.row)">修改</span>
            <span @click="formDelete(scope.row)">删除</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- /用户列表区域 -->

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 3, 5, 10]"
        :page-size="queryInfo.pagesize"
        background
        layout=" sizes, prev, pager, next, jumper"
        :total="this.total"
      >
      </el-pagination>
    </el-card>
    <!-- /卡片视图 -->

    <!-- 预览用户对话框 -->
    <el-dialog title="预览文章" width="60%" :visible.sync="previewVisible">
      <!-- 主题区域 -->
      <el-form
        :model="previewForm"
        :rules="addFormRules"
        ref="addFormRef"
        label-width="80px"
      >
      </el-form>
      <div class="preview">
        <h2>{{ previewForm.title }}</h2>
        <span>{{ previewForm.createTime | filterTime }}</span>
        <span>超级管理员</span>
        <span>阅读数{{ previewForm.visits }}</span>
      </div>
      <div class="previewMain">
        <span v-html="previewForm.articleBody"></span>
      </div>
    </el-dialog>
    <!-- /预览用户对话框 -->

    <!-- 新增技巧对话框 -->
    <el-dialog title="新增文章" width="50%" :visible.sync="outerVisible">
      <!-- 主题区域 -->
      <el-form
        :model="addForm"
        :rules="addFormRules"
        ref="addFormRef"
        label-width="80px"
      >
        <el-form-item label="文章标题" prop="username">
          <el-input
            v-model="addForm.username"
            placeholder="请输入文章标签"
          ></el-input>
        </el-form-item>

        <!-- 富文本编辑器 -->
        <el-form-item label="文章内容" prop="articleBody">
          <quill-editor v-model="addForm.articleBody" :options="editorOption">
          </quill-editor>
        </el-form-item>

        <!-- 富文本编辑器 -->

        <!-- 底部区域 -->
        <el-form-item label="视频地址">
          <el-input
            placeholder="请输入文章标签"
            v-model="addForm.videoURL"
          ></el-input>
        </el-form-item>
        <!-- 底部区域 -->
      </el-form>
      <!-- 确认 取消按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="outerVisible = false">取 消</el-button>
        <el-button type="primary" @click="formAdd">确认</el-button>
      </div>
    </el-dialog>
    <!-- 、新增技巧对话框 -->

    <!-- 修改用户的对话框 -->
    <el-dialog title="修改文章" width="50%" :visible.sync="changeVisible">
      <!-- 主题区域 -->
      <el-form
        :model="changeForm"
        :rules="addFormRules"
        ref="addFormRef"
        label-width="80px"
      >
        <el-form-item label="文章标题" prop="username">
          <el-input
            v-model="changeForm.title"
            placeholder="请输入文章标签"
          ></el-input>
        </el-form-item>

        <!-- 富文本编辑器 -->
        <el-form-item label="文章内容" prop="articleBody">
          <quill-editor
            v-model="changeForm.articleBody"
            :options="editorOption"
          >
          </quill-editor>
        </el-form-item>

        <!-- 富文本编辑器 -->

        <!-- 底部区域 -->
        <el-form-item label="视频地址">
          <el-input
            placeholder="请输入文章标签"
            v-model="changeForm.videoURL"
          ></el-input>
        </el-form-item>
        <!-- 底部区域 -->
      </el-form>
      <!-- 确认 取消按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="changeVisible = false">取 消</el-button>
        <el-button type="primary" @click="formAffirm(changeForm)"
          >确认</el-button
        >
      </div>
    </el-dialog>
    <!-- /修改用户的对话框 -->
  </div>
</template>
<script>
import {
  getMianShi,
  editState,
  getAdd,
  getDelete,
  getChange,
  getId,
  getPreview,
} from "../../api/article";
export default {
  name: "MianShi",
  data() {
    return {
      //搜索框内容
      formInline: {
        user: "",
        region: "",
      },
      //分页数据
      queryInfo: {
        query: "",
        //当前的页数
        pagenum: 1,
        //当前每页显示多少条数据
        pagesize: 10,
      },
      articlelist: [], //文章列表数据
      outerVisible: false, //新增技巧弹出框
      changeVisible: false, //修改用户的弹出框
      previewVisible: false, //预览弹出框
      total: 0, //总条数
      //添加表单用户数据
      addForm: {
        username: "", //标题
        articleBody: "", //文章正文
        videoURL: "", //视频地址
      },
      changeForm: {}, //修改表单数据
      previewForm: {}, //预览存贮数据
      editorOption: {
        //清除富文本中默认的内容
        placeholder: "",
      },
      //添加表单验证规则对象
      addFormRules: {
        username: [
          {
            required: true,
            message: "请输入文章标题",
            trigg: "blur",
          },
        ],
        articleBody: [
          {
            required: true,
          },
        ],
      },
    };
  },
  created() {
    this.getArticleList();
  },
  methods: {
    //点击修改文章里的确认按钮
    async formAffirm(val) {
      console.log(val, 123);
      try {
        const { data } = await getChange(val.id, {
          id: val.id,
          title: val.title,
          videoURL: val.videoURL,
          articleBody: val.articleBody,
        });
        this.changeVisible = false;
        this.getArticleList();
        this.$message.success("操作成功");
      } catch (err) {
        this.$message.error("操作错误");
      }
    },
    // 点击修改文章
    async formChange(val) {
      try {
        const { data } = await getId(val.id);
        this.changeForm = data;
        this.changeVisible = true;
        console.log(data, this.changeForm.id);
      } catch (err) {}
    },
    // 新增技巧请求
    async formAdd() {
      try {
        const { data } = await getAdd({
          title: this.addForm.username,
          articleBody: this.addForm.articleBody,
          videoURL: this.addForm.videoURL,
        });
        this.outerVisible = false;
        this.getArticleList();
        (this.addForm.username = ""),
          (this.addForm.articleBody = ""),
          (this.addForm.videoURL = "");
        this.$message.success("操作成功");
        // console.log(data, 111);
      } catch (err) {
        this.$message.error("操作失败");
      }
    },

    //删除
    async formDelete(val) {
      const { data } = await getDelete(val.id);
      // console.log(data,777777);
      this.getArticleList();
    },
    //搜索
    async getInquire() {
      try {
        const { data } = await getMianShi({
          keyword: this.formInline.user, //关键字
          state: this.formInline.region, //状态 1 开启 0 屏蔽
        });
        this.articlelist = data.items;
      } catch (err) {
        console.log("错误", err);
      }
    },
    //禁用启用触发的按钮
    async onState(val) {
      console.log(val, "state");
      let i = 0;
      if (val.state === 1) {
        i = 0;
      } else {
        i = 1;
      }
      try {
        const { data } = await editState(val.id, i);
        console.log(data, 888);
        this.getArticleList();
      } catch (err) {
        console.log("失败");
      }
    },
    async viewItem(val) {
      // console.log(val.id);
      try {
        const { data } = await getPreview(val.id);
        this.previewForm = data;
        this.previewVisible = true;
        console.log(data);
      } catch (err) {
        this.$message.error("操作失败");
      }
    },
    //获取数据并渲染
    async getArticleList() {
      try {
        const { data } = await getMianShi({
          pagesize: this.queryInfo.pagesize, //当前页数
          page: this.queryInfo.pagenum, //页尺寸
        });
        // {
        //   pagesize: this.queryInfo.pagesize, //当前页数
        //   page: this.queryInfo.pagenum, //页尺寸
        //   keyword: this.formInline.user, //关键字
        //   state: this.formInline.region, //状态 1 开启 0 屏蔽
        // }
        console.log(data, 999);
        //数据存贮
        this.articlelist = data.items;
        //获取一共多少条数据
        this.total = data.counts;
        // console.log(this.articlelist, "123");
      } catch (err) {
        console.log(err, "错误");
      }
    },
    //监听pagesize(每页显示的条数)改变的事件
    handleSizeChange(newSize) {
      console.log(newSize);
      this.queryInfo.pagesize = newSize;
      this.getArticleList();
    },
    //监听页码值 改变的事件
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage;
      this.getArticleList();
      console.log(newPage);
    },
  },
};
</script>
<style lang='less' scoped>
.mian-shi {
  .zhuangtai {
    margin-left: 50px;
  }
  .has-gutter {
    margin-top: 10px;
    .el-table-column {
      background-color: red;
    }
  }
  /deep/.el-dialog {
    border-radius: 15px;
    .el-dialog__header {
      background-color: #1493fa;
      border-radius: 15px 15px 0 0;
      .el-dialog__title {
        color: #fff;
      }
      .el-dialog__close {
        color: #fff;
      }
    }
  }
  /deep/td:last-child {
    .cell {
      span {
        padding: 5px;
        color: rgb(64, 158, 255);
        cursor: pointer;
      }
    }
  }
  .el-pagination {
    margin-top: 20px;
    text-align: right;
  }
  .preview {
    span {
      padding: 8px;
    }
  }
  .previewMain {
    background: rgb(245, 245, 245);
    margin-top: 20px;
    padding: 10px;
    border-top: 1px dotted gray;
  }
}
</style>